// pages/batteryStatistics/batteryStatistics.js
import CommonService from '../../../utils/service/commonService.js';
import * as echarts from '../../../ec-canvas/echarts';
const util = require('../../../utils/util');
import Toast from '../../../miniprogram_npm/@vant/weapp/toast/toast';
//图表对象
let Chart1=null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    //图表
    ec1: {
      //延迟加载
      lazyLoad: true
    },
    //是否显示图表（避免遮挡）
    showChart: true,
    //无数据
    showNoData: false,    
    //传参来的设备编号
    equipmentNo:'',
    //传参来的物联网编号
    imei:'',
    //今日日期
    todayDate:util.timeFormatDay(new Date()),
    //日期选择框
    showDate:false,
    currentDate: new Date().getTime(),
    minDate: new Date().getTime(),
    maxDate: new Date().getTime(),
    //显示的日期
    currentDateStr:util.timeFormatDay(new Date()),
    //日统计到几天前
    dayNum: 31,
    //开始时间选择框
    showStartTime: false,
    //结束时间选择框
    showEndTime: false,
    //开始时间
    currentStart: null,
    //结束时间
    currentEnd: null,
    //时间格式
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //设置日统计的最小日期
    this.getBeforeDate();

    if(options.detail){
      let obj=JSON.parse(options.detail);
      this.setData({
        equipmentNo: obj.equipmentNo,
        imei: obj.imei
      })

      //获取电池数据
      this.getChartData();
    }
  },

  //获取电池数据
  getChartData(){
    let td=this.data;

    Toast.loading({
      duration: 0,
      forbidClick: true,
      message: '加载中...'
    });

    //图表组件
    this.echartsComponnet1 = this.selectComponent('#mychart1');
    let param={
      imei: td.imei,
      startTime: td.currentDateStr +' '+ td.currentStart + ':00',
      endTime: td.currentDateStr +' '+ td.currentEnd + ':00'
    } 

    CommonService.findVol(param).then(res=>{
      if(res.data.data && res.data.data.result && res.data.data.result.length){
        let result=res.data.data.result;
        console.log('电池变化数据');
        console.log(result);  

        let xData=[];
        let yData=[];
       
        result.forEach(item => {
          xData.push(item.dayTime.slice(11,16));
          yData.push(item.vol);
        });

        let chartData={
          xData: xData,
          yData: yData
        }

        this.setData({
          showNoData: false,
          showChart: true
        })

        //判断图表是否第一次绘制
        this.isHaveChart(Chart1,this.echartsComponnet1,chartData);

        Toast.clear();
      }else{
        this.setData({
          showNoData:true,
          showChart: false
        })
        Toast.clear();
      }
    }).catch((error) => {
      this.setData({
        showNoData:true,
        showChart: false
      })
      Toast.clear();
    })
  },

  //显示日期选择框
  onShowDate(){
    this.setData({
      showDate: true
    })
    //隐藏图表
    this.hideChart();
  },

  //关闭日期选择框
  onCloseDate(){
    this.setData({
      showDate: false
    })
    //显示图表
    this.showChart();
  },

  //确定日期时
  onConfirmDate(event){
    this.setData({
      currentDate: event.detail,
      currentDateStr: util.timeFormatDay(event.detail)
    })

    //关闭日期选择框
    this.onCloseDate();

    //获取电池数据
    this.getChartData();
  },

  //设置日统计的最小日期
  getBeforeDate(){
    let rusult=util.countPrevDay(new Date(),this.data.dayNum);

    //2023-8-6之前无数据，不可查询
    let times=new Date('2023/08/06').getTime();   
    if(rusult<times){
      rusult=times;
    }

    //设置查询时间，当前时间的前三个小时
    let end=new Date().getHours();
    let start=end-3>0 ? end-3 : 0;

    if(start<10){
      start='0'+start;
    }
    if(end<10){
      end='0'+end;
    }

    this.setData({
      minDate: rusult,
      currentStart: start+':00',
      currentEnd: end+':00'
    })
  },

  //判断图表是否第一次绘制
  isHaveChart(chartObj,componnetObj,chartData){
    if (!chartObj){
      //如果是第一次绘制，则初始化图表
      this.init_echarts(chartObj,componnetObj,chartData);
    }else{
      //更新图表数据
      this.setOption(chartObj,chartData);
    }
  },

  //初始化图表
  init_echarts: function (chartObj,componnetObj,chartData) {
    componnetObj.init((canvas, width, height) => {
      chartObj = echarts.init(canvas, null, {
        width: width,
        height: height
      });

      this.setOption(chartObj,chartData);

      return chartObj;
    });
  },

  //更新图表数据
  setOption: function (chartObj,chartData) {
    //清除
    chartObj.clear();
    //设置新数据
    chartObj.setOption(this.getOption(chartData));
  },

  //指定图表的配置项和数据
  getOption: function (chartData) {
    //轴线颜色
    let axisColor='#19334c';

    let option = {
      grid: {
        left: '3%',
        right: '14%',
        top: '10%',
        bottom: '15%',
        containLabel: true,
      },
      xAxis: {
        name: '时间',
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: axisColor,
          fontSize : 13,
          interval: 0,
          rotate: -30
        },
        axisLine: {
          lineStyle: {
            color: axisColor,
          }
        },
        splitLine: {
          lineStyle: {
            color: '#eee'
          }
        },
        data: chartData.xData
      },
      yAxis: {
        name: '电压',
        type: 'value',
        boundaryGap: false,
        axisLabel: {
          color: axisColor,
          fontSize : 13,
        },
        axisLine: {
          lineStyle: {
            color: axisColor,
          }
        },
        splitLine: {
          lineStyle: {
            color: '#eee' 
          }
        }
      },
      dataZoom: {
        type: 'slider',
        rangeMode: 'value',
        startValue: 0,
        endValue: 9,
        bottom: 0,
        fillerColor: 'rgba(31,78,121,0.5)',
        handleStyle:{
          color: '#1f4e79'
        }
      },
      series: {
        type: 'line',
        lineStyle: {
          color: '#CE5D59'
        },
        itemStyle : { 
          normal: {
            label :{
              show: true,
              position: 'bottom',
              rotate: -30
            }
          }},
        data: chartData.yData
      },
      tooltip: {
        trigger: 'axis'
      },
    };

    return option;
  },

  //隐藏图表
  hideChart(){
    this.setData({
      showChart:false
		})
  },

  //显示图表
  showChart(){
    this.setData({
      showChart:true
		})
  },

  //显示开始时间
  onShowStartTime(){
    if(this.data.currentDateStr){
      this.setData({
        showStartTime: true
      })
      //隐藏图表
      this.hideChart();
    }else{
      Toast.fail('请先选择查询日期');
    }
  },

  //隐藏开始时间
  onCloseStartTime(){
    this.setData({
			showStartTime: false
    })
    //显示图表
    this.showChart();
  },  

  //确认开始时间
  onConfirmStartTime(e) {
    let end=this.data.currentEnd;
    if(e.detail<end){
      this.setData({
        currentStart: e.detail
      })
      this.onCloseStartTime();
  
      //获取电池数据
      this.getChartData();
    }else{
      Toast.fail('开始时间需小于结束时间');
    }  
  },

  //显示结束时间
  onShowEndTime(){
    if(this.data.currentDateStr){
      this.setData({
        showEndTime: true
      })
      //隐藏图表
      this.hideChart();
    }else{
      Toast.fail('请先选择查询日期');
    }
  },

  //隐藏结束时间
  onCloseEndTime(){
    this.setData({
			showEndTime: false
    })
    //显示图表
    this.showChart();
  },

  //确认结束时间
  onConfirmEndTime(e) {
    let start=this.data.currentStart; 
    if(start<e.detail){
      this.setData({
        currentEnd: e.detail
      })
      this.onCloseEndTime();
      
      //获取电池数据
      this.getChartData();
    }else{
      Toast.fail('开始时间需小于结束时间');
    }
  }, 

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  }
})